<template>
	<div id="app">
		<el-container>
			<el-header>
				<img src="~@/assets/logo.png" class="he__logo" alt="" />
				<img src="~@/assets/scqk.png" class="he__logotext" alt="" />
			</el-header>
			<el-container class="con" style="height: calc(100vh - 113px);">
				<!-- <el-aside style="height: calc(100% - 67px);">
					<div ref="leftTop">
						<div style="display: flex;align-items: center;justify-content: flex-start;padding-top: 10px;">
							<el-input placeholder="" v-model="value1">
								<template slot="prepend">日期 :</template>
							</el-input>
							<el-input placeholder="" v-model="value2">
								<template slot="prepend">日期 :</template>
							</el-input>
						</div>
					</div>
					<div :style="{height:`calc(100% - ${lefttopheight}px)`}">
						<div style="height: calc(50% - 23px);margin-bottom: 23px;">
							<el-table border :data="tableData" stripe style="width: 100%"
								:height="`calc(100%)`"
								:header-cell-style='{background:"#F9F9F9",color:"#1F163A",textAlign:"center"}'
								:cell-style="{color:'#1F163A',textAlign:'center'}">
								<el-table-column prop="zh" label="扎号" width="46">
								</el-table-column>
								<el-table-column prop="gxm" label="唯一码" width="100">
								</el-table-column>
								<el-table-column prop="gh" label="码标" width="100">
								</el-table-column>
								<el-table-column prop="wgr" label="颜色" width="60">
								</el-table-column>
								<el-table-column prop="cf" label="颜色" width="80">
								</el-table-column>
								<el-table-column prop="sl" label="数量" width="60">
								</el-table-column>
								
								<div slot="append" style="display:flex;flex-wrap: wrap;">
									<div class="footeritem" style="height: 49px;">
										<div>已完成</div>
										<div>26</div>
									</div>
									<div class="footeritem" style="height: 49px;background-color: #fff;">
										<div>未完成</div>
										<div>0</div>
									</div>
									<div class="footeritem" style="height: 49px;">
										<div>完成率</div>
										<div>100%</div>
									</div>
								</div>
							</el-table>
							
						</div>
						<div style="height: 50%;">
							<el-table border :data="tableData1" stripe style="width: 100%" :height="`calc(100%)`"
								:header-cell-style='{background:"#F9F9F9",color:"#1F163A",textAlign:"center"}'
								:cell-style="{color:'#1F163A',textAlign:'center'}">
								<el-table-column prop="yi" label="0" width="95">
								</el-table-column>
								<el-table-column prop="er" label="0" width="95">
								</el-table-column>
								<el-table-column prop="san" label="0" width="95">
								</el-table-column>
								<el-table-column prop="si" label="0" width="95">
								</el-table-column>
								<el-table-column prop="wu" label="0" width="95">
								</el-table-column>
								<div slot="append" style="display:flex;flex-wrap: wrap;">
									<div class="footeritem1" style="height: 49px;padding: 0;display: flex;">
										<div style="width: 95px;text-align: center;" v-for="(item,index) in 5"
											:key="index">0</div>
									</div>
									<div class="footeritem1" style="height: 49px;padding: 0;display: flex;">
										<div style="width: 95px;text-align: center;" v-for="(item,index) in 5"
											:key="index">26</div>
									</div>
									<div class="footeritem1" style="height: 49px;padding: 0;display: flex;">
										<div style="width: 95px;text-align: center;" v-for="(item,index) in 5"
											:key="index">0%</div>
									</div>
								</div>
								
								
							</el-table>
							
							
						</div>
					</div>
				</el-aside> -->
				<el-main>
					<div class="mian__top" ref="mian__top">
						<div>
							<el-button v-for='(item,index) in btnlist' :key="index"
								:style="{color:'#231918',background:'rgba(74, 119, 246, .2)'}">{{item.text}}</el-button>
						</div>

						
					</div>
					<div class="mian__box" :style="{height:`calc(100% - 10px - ${mainTopheight}px)`}">
						<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				value1: "2024-03-09",
				value2: '455-GD99#',
				radio1: '工序明细',
				btnlist: [{
						text: '查询 ',
					},
					{
						text: '输出',
					},
					{
						text: '打印',
					},
					{
						text: ' 退出',
					},
				],
				tableData2: [{
						yi: '26',
						er: '26',
						san: '26',
						si: '26',
						wu: '26',
					},
					{
						yi: '0%',
						er: '0%',
						san: '0%',
						si: '0%',
						wu: '0%',
					},
				],
				// btnlist: [{
				// 		text: '增加',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '复制',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '修改',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '删除',
				// 		bgcolor: '#ececec',
				// 		color: '#4E6781'
				// 	}, {
				// 		text: '保存',
				// 		bgcolor: '#ececec',
				// 		color: '#4E6781'
				// 	}, {
				// 		text: '放弃',
				// 		bgcolor: '#ececec',
				// 		color: '#4E6781'
				// 	}, {
				// 		text: '刷新',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '打印',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '输出',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '列项',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	},
				// 	{
				// 		text: '导入',
				// 		bgcolor: '#ececec',
				// 		color: '#4E6781'
				// 	},
				// 	{
				// 		text: '导出',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '过滤',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '字母',
				// 		bgcolor: '#ececec',
				// 		color: '#4E6781'
				// 	}, {
				// 		text: '图片',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '返回',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	},
				// ],
				// btnlist: [{
				// 		text: '增加',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '复制',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '修改',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '删除',
				// 		bgcolor: '#ececec',
				// 		color: '#4E6781'
				// 	}, {
				// 		text: '保存',
				// 		bgcolor: '#ececec',
				// 		color: '#4E6781'
				// 	}, {
				// 		text: '放弃',
				// 		bgcolor: '#ececec',
				// 		color: '#4E6781'
				// 	}, {
				// 		text: '刷新',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '打印',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '输出',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '列项',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	},
				// 	{
				// 		text: '导入',
				// 		bgcolor: '#ececec',
				// 		color: '#4E6781'
				// 	},
				// 	{
				// 		text: '导出',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '过滤',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '字母',
				// 		bgcolor: '#ececec',
				// 		color: '#4E6781'
				// 	}, {
				// 		text: '图片',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	}, {
				// 		text: '返回',
				// 		bgcolor: '#dbe4fd',
				// 		color: '#231918'
				// 	},
				// ],
				tableData: [{
						sl: 14,
						gxm: "131393",
						gh: '2302-1',
						wgr: "黑色",
						cf: 'M/34',
						zh: 1
					},
					{
						sl: 14,
						gxm: "131393",
						gh: '2302-1',
						wgr: "黑色",
						cf: 'M/34',
						zh: 1
					},
					{
						sl: 14,
						gxm: "131393",
						gh: '2302-1',
						wgr: "黑色",
						cf: 'M/34',
						zh: 1
					},
				],
				tableData1: [{
						yi: '990|不开通权限首序',
						er: '1424|点胶',
						san: '1715冲床-果冻部完工',
						si: '1109吸花面',
						wu: '1651印标',
					},
					{
						yi: '990|不开通权限首序',
						er: '1424|点胶',
						san: '1715冲床-果冻部完工',
						si: '1109吸花面',
						wu: '1651印标',
					},
				],
				curindex: '',
				mainTopheight: 0,
				lefttopheight: 0,

			}
		},
		mounted() {
			// let height = this.$refs.mian__top.offsetHeight; //100
			this.mainTopheight = this.$refs.mian__top.offsetHeight
			this.lefttopheight = this.$refs.leftTop.offsetHeight
			let _this = this
			window.onresize = function() {
				_this.mainTopheight = _this.$refs.mian__top.offsetHeight
				_this.lefttopheight = _this.$refs.leftTop.offsetHeight
				// console.log(_this.lefttopheight)
			};

		},

	}
</script>
<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	.el-header {
		background-color: #fff;
		height: 111px !important;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #EFEFEF;
		padding-left: 43px;

		/* font-weight: normal; */
	}

	.he__logo {
		width: 64px;
		height: 53px;
		margin-right: 5px;
	}

	.he__logotext {
		width: 127px;
		height: 24px;
	}

	.el-aside {
		background-color: #fff;
		width: 653px !important;
		border-right: 2px solid #EFEFEF;
		padding-left: 43px;
	}

	.el-main {
		padding: 0 !important;
		background-color: #f1f4f6;
	}

	.con {}

	.dian {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		border: 3px solid #4A77F6;
		margin-right: 25px;
		justify-content: center;
		opacity: 0.39;
	}

	.el-submenu-title-1 {
		display: flex;
		align-items: center;
		font-size: 19px;
		padding-left: 20px;
	}

	.dian1 {
		width: 8px;
		height: 8px;
		background: #4E6781;
		border-radius: 4px;
		opacity: 0.5;
		margin-right: 5px;

	}

	.el-submenu .el-menu-item {
		font-size: 16px;
		padding-left: 90px !important;
	}

	.active {
		opacity: 1;
	}

	.lefttop {
		height: 61px;
		background: #4A77F6;
		display: flex;
		align-items: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 21px;
		color: #FFFFFF;


	}

	.lefttop__icon {
		width: 30px;
		height: 30px;
		margin-left: 44px;
		margin-right: 17px;
	}

	.cz {
		padding: 27px 40px 0;


	}

	.cz__item {
		display: flex;
		align-items: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 17px;
		color: #1E173C;
		line-height: 17px;
		margin-bottom: 25px;


	}

	.cz__item__label {

		width: 92px;
	}

	.el-button+.el-button {
		margin-left: 2px;
	}

	.mian__top {
		background-color: #fff;
		padding-bottom: 5px;
		display: flex;
		justify-content: space-between;
	}

	.mian__box {
		width: calc(100% - 30px);
		padding: 15px;
		padding-bottom: 0;
	}

	.home__top {
		display: flex;
		align-items: center;

	}

	.home__top__btn {
		cursor: pointer;
		padding: 0 18px;
		height: 50px;
		line-height: 50px;
		background-color: rgba(74, 119, 246, .5);
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
	}

	.leftfooter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 24px 0;
	}

	/deep/.el-input__inner {
		width: 135px;
		padding-left: 10px;
	}

	.el-input {
		width: fit-content;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	/deep/.el-input-group__prepend {
		padding: 0 10px;
	}

	/deep/.el-input__icon {
		width: 20px;
	}

	/deep/.el-input--suffix .el-input__inner {
		padding-right: 20px;
	}

	/deep/.bz .el-input {
		width: 100%;
		display: flex;
		/* padding-left: 10px; */
	}

	/deep/.bz .el-input .el-input__inner {
		width: 100%;
	}

	/deep/.bz .el-input .el-input-group__prepend {
		width: fit-content;
		display: flex;
		align-items: center;
	}

	.footeritem {
		/* width: calc(100% - 18px - 18px); */
		width: 100%;
		background: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
	}
	.footeritem1 {
		
		background: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
	}
	/deep/.el-table__append-wrapper{
		overflow: visible;
		margin-top: 10px;
	}
	/deep/.el-table--scrollable-x .el-table__body-wrapper{
		overflow-y: auto;
	}
</style>